<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" th:href="@{/static/assets/images/favicon.png}" type="image/png">
    <title>首页</title>

    <!--Begin  Page Level  CSS -->
    <link th:href="@{/static/assets/plugins/morris-chart/morris.css}" rel="stylesheet">
    <link th:href="@{/static/assets/plugins/jquery-ui/jquery-ui.min.css}" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link th:href="@{/static/assets/plugins/datatables/css/jquery.datatables.min.css}" rel="stylesheet"
          type="text/css"/>
    <link th:href="@{/static/assets/plugins/datatables/css/jquery.dataTables-custom.css}" rel="stylesheet"
          type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link th:href="@{/static/assets/css/icons.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/style.css}" rel="stylesheet">
    <link th:href="@{/static/assets/css/responsive.css}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="sticky-header">


<div th:include="left-side-menu"></div>


<!-- main content start-->
<div class="main-content">

    <!-- header section start-->
    <div class="header-section" th:include="header">
    </div>
    <!-- header section end-->


    <!--body wrapper start-->
    <div class="wrapper">

        <!--Start Page Title-->
        <div class="page-title-box">
            <h4 class="page-title">首页 </h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>

                <li class="active">
                    用户管理
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--End Page Title-->

        <!--Start row-->
        <div class="row">
            <div class="container">
                <div class="analytics-box">

                </div>
            </div>
        </div>
        <!--End row-->

        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">
                    <h2 class="header-title">用户管理</h2>
                    <div class="table-responsive">
                        <table id="example" class="display table">
                            <thead>
                            <tr>
                                <th></th>
                                <th>用户名</th>
                                <th>性别</th>
                                <th>电话</th>
                                <th>状态</th>
                                <th>工号</th>
                                <th>邮箱</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="obj,stat : ${employeeList}">
                                <td th:text="${stat.index +  1}"></td>
                                <td th:text="${obj.name}"></td>
                                <td th:text="${obj.gender == 1 ? '男' : '女'}"></td>
                                <td th:text="${obj.mobile}"></td>
                                <td th:text="${obj.status == 'A' ? '在职' : '离职'}"></td>
                                <td th:text="${obj.employeeNo}"></td>
                                <td th:text="${obj.email}"></td>
                                <td>
                                    <button th:onclick="syncEmp([[${obj.id}]], 'PUT')">同步</button>
                                    <!-- 按钮触发模态框 -->
                                    <button th:onclick="editEmpShow([[${obj}]])">
                                        编辑
                                    </button>
                                    <button th:if="${obj.status == 'I'}" th:onclick="renew([[${obj.id}]])">恢复</button>
                                    <button th:if="${obj.status == 'A'}" th:onclick="leaveEmp([[${obj.id}]])">离职</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--End row-->

    </div>
    <!-- End Wrapper-->


    <!--Start  Footer -->
    <footer class="footer-main">Copyright &copy; 2021.LeTui Pricng All rights reserved.<a target="_blank" href="#">fly67
        初品网站</a>
    </footer>
    <!--End footer -->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户信息
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row" onsubmit="return false" action="#">
                        <div class="col-md-12">
                            <form id="editForm" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="name">用户名</label>
                                    <div class="col-sm-6">
                                        <input id="id" name="id" class="form-control input-sm" placeholder="id"
                                               type="hidden">
                                        <input id="name" name="name" class="form-control input-sm" placeholder="用户名"
                                               type="text">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="gender">性别</label>
                                    <div class="col-sm-6">
                                        <select id="gender" name="gender">
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="mobile">电话</label>
                                    <div class="col-sm-6">
                                        <input id="mobile" name="mobile" class="form-control input-sm" placeholder="电话"
                                               type="text">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label" for="email">邮箱</label>
                                    <div class="col-sm-6">
                                        <input id="email" name="email" class="form-control input-sm" placeholder="邮箱"
                                               type="text">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="button" value="提交" class="btn btn-primary btn-block"
                                           onclick="submitEdit();return false;"/>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
<!--                    <button type="button" class="btn btn-primary">-->
<!--                        提交更改-->
<!--                    </button>-->
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


</div>
<!--End main content -->


<!--Begin core plugin -->
<script th:src="@{/static/assets/js/jquery.min.js}"></script>
<script th:src="@{/static/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/static/assets/plugins/moment/moment.js}"></script>
<script th:src="@{/static/assets/js/jquery.slimscroll.js}"></script>
<script th:src="@{/static/assets/js/jquery.nicescroll.js}"></script>
<script th:src="@{/static/assets/js/functions.js}"></script>
<!-- End core plugin -->

<!--Begin Page Level Plugin-->
<!--<script th:src="@{/static/assets/plugins/morris-chart/morris.js}"></script>-->
<!--<script th:src="@{/static/assets/plugins/morris-chart/raphael-min.js}"></script>-->
<!--<script th:src="@{/static/assets/plugins/jquery-sparkline/jquery.sparkline.min.js}"></script>-->
<!--<script th:src="@{/static/assets/pages/dashboard.js}"></script>-->
<!--End Page Level Plugin-->

<!--Begin Page Level Plugin-->
<script th:src="@{/static/assets/plugins/datatables/js/jquery.datatables.min.js}"></script>
<script th:src="@{/static/assets/pages/table-data.js}"></script>
<!--End Page Level Plugin-->
<script>
    function syncEmp(id, method) {
        console.log('员工数据同步:' + id);
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/employee/syncEmp/?id=" + id + "&type=" + method,//url
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.code != 200 || result.code != 0) {
                    alert(result.msg)
                } else {
                    // 登陆成功
                    alert("同步成功");
                }

            },
            error: function (result) {
                console.log(result.responseJSON);//打印服务端返回的数据(调试用)
                alert(result.responseJSON.msg);
            }
        });
    }

    function renew(id) {
        console.log('用户操作恢复入职：id = ' + id);
        var data = {};
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            contentType: 'application/json',
            url: "/employee/renew/" + id,//url
            data: JSON.stringify(data),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.code != 200 && result.code != 0) {
                    alert(result.msg);
                } else {
                    // 成功
                    location.reload();
                }
            },
            error: function (result) {
                console.log(result.responseJSON);//打印服务端返回的数据(调试用)
                alert(result.responseJSON.msg);
            }
        });
    }

    function leaveEmp(id) {
        console.log('用户操作离职：id = ' + id);
        var data = {};
        $.ajax({
            //几个参数需要注意一下
            type: "DELETE",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            contentType: 'application/json',
            url: "/employee/leave/" + id,//url
            data: JSON.stringify(data),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.code != 200 && result.code != 0) {
                    alert(result.msg);
                } else {
                    // 成功
                    location.reload();
                }
            },
            error: function (result) {
                console.log(result.responseJSON);//打印服务端返回的数据(调试用)
                alert(result.responseJSON.msg);
            }
        });
    }

    function editEmpShow(obj) {
        console.info(obj);
        $("#id").val(obj.id);
        $("#name").val(obj.name);
        $("#mobile").val(obj.mobile);
        $("#name").val(obj.name);
        $("#email").val(obj.email);
        $("#gender").val(obj.gender);
        $('#myModal').modal('show');
    }

    function submitEdit() {
        console.log('用户信息编辑：提交');
        var data = {
            "id": $("#id").val(),
            "name": $("#name").val(),
            "mobile": $("#mobile").val(),
            "email": $("#email").val(),
            "gender": $("#gender").val()
        }
        console.log(data);
        $.ajax({
            //几个参数需要注意一下
            type: "PUT",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            contentType: 'application/json',
            url: "/employee/edit/" + $("#id").val(),//url
            data: JSON.stringify(data),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.code != 200 && result.code != 0) {
                    alert(result.msg);
                } else {
                    location.reload();
                }

            },
            error: function (result) {
                console.log(result.responseJSON);//打印服务端返回的数据(调试用)
                alert(result.responseJSON.msg);
            }
        });
    }
</script>
</body>

</html>
